import { useEffect, useState, memo } from "react";
import { Button, Tooltip } from "antd";
import { DeleteOutlined } from "@ant-design/icons";

 function FileCard({ file, onRemove, isDisabled }) {
  return (
    <div
      className="absolute w-96 left-1/2 -translate-x-1/2 top-20 flex items-center h-20 p-4 text-base border rounded-lg border-gray-700 transition-transform duration-300 
        translate-y-50 opacity-100"
    >
      <div className="w-8">
        <svg
          t="1733969824169"
          class="icon"
          viewBox="64 64 896 896"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="19721"
          width="2em"
          height="2em"
        >
          <path
            d="M612.8 64H232c-30.93 0-56 25.07-56 56v784c0 30.93 25.07 56 56 56h560c30.93 0 56-25.07 56-56V288H668.8c-30.93 0-56-25.07-56-56V64z"
            fill="#8C9EFF"
            p-id="19722"
            data-spm-anchor-id="a313x.search_index.0.i2.22ad3a81m0mLC9"
            class=""
          ></path>
          <path
            d="M848 288L612.8 64v168c0 30.93 25.07 56 56 56H848z"
            fill="#E1F5FF"
            p-id="19723"
            data-spm-anchor-id="a313x.search_index.0.i1.22ad3a81m0mLC9"
            class="selected"
          ></path>
          <path
            d="M491 287H341c-11.6 0-21 9.4-21 21s9.4 21 21 21h150c11.6 0 21-9.4 21-21s-9.4-21-21-21zM683 423H341c-11.6 0-21 9.4-21 21s9.4 21 21 21h342c11.6 0 21-9.4 21-21s-9.4-21-21-21zM683 559H341c-11.6 0-21 9.4-21 21s9.4 21 21 21h342c11.6 0 21-9.4 21-21s-9.4-21-21-21zM683 695H341c-11.6 0-21 9.4-21 21s9.4 21 21 21h342c11.6 0 21-9.4 21-21s-9.4-21-21-21z"
            fill="#313FA0"
            p-id="19724"
            data-spm-anchor-id="a313x.search_index.0.i3.22ad3a81m0mLC9"
            class="selected"
          ></path>
        </svg>
      </div>
      <span className="flex-1 px-4 text-gray-300 leading-normal text-ellipsis overflow-hidden whitespace-nowrap">
        {file?.name}
      </span>
      <Tooltip title="删除文件" className="w-8">
        <Button
          icon={<DeleteOutlined />}
          color="default"
          variant="link"
          onClick={onRemove}
          disabled={isDisabled}
        />
      </Tooltip>
    </div>
  );
}
export default memo(FileCard)